<template>
	<view class="content">
		<scroll-view class="box_scroll" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="50" refresher-background="#f8f8f8" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">


			<!-- 头部搜索 -->
			<view class="header">
				<image class="back"
					src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778367921_51039d1c/top.png?x-oss-process=image/resize,w_300"
					alt=""></image>
				<view class="address" @click="addressClick">
					<view class="">{{ address }}</view>
					<image
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776908992_2089b9ca/select.png?x-oss-process=image/resize,w_300"
						alt=""></image>
				</view>
				<!-- <view class="input">
					<u--input placeholder="科学尽头是什么？" suffixIcon="search" suffixIconStyle="color: #000;font-size: 40rpx;"
						v-model="inputModel" shape="circle" placeholder-class="placeholder-class"></u--input>
				</view> -->
			</view>
			<!-- 导航 -->
			<view class="nav">
				<view class="nav-items" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
					<image :src="item.img" alt="" class="nav-img"></image>
					<text class="nav-label">{{ item.label }}</text>
				</view>
			</view>
			<!-- 每日练习 -->
			<view class="practice">
				<view class="practice_header">
					<view class="title">
						<image
							src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776806767_97499425/mirilianxi.png?x-oss-process=image/resize,w_300"
							alt=""></image>
						<text>每日练习</text>
					</view>
					<view class="nums">
						题数：{{ questionNum }}题
					</view>
				</view>
				<view class="practice_progress">
					<text>已完成{{ correctNum }}题，完成{{ upgradeNum }}%</text>
					<u-line-progress :percentage="upgradeNum" :showText="false"
						activeColor="rgb(254, 1,0)"></u-line-progress>
				</view>
				<view class="practice_nav">
					<view class="practice_item" v-for="(item, index) in practiceNavList" :key="index"
						@click="practiceClick(item)">
						<image :src="item.img" alt="" class="nav-img"></image>
						<text class="nav-label">{{ item.label }}</text>
					</view>
				</view>
				<!-- 跳转竞赛 -->
				<view class="practice_image" @click="competitionClick()">
					<!-- <image
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/5/27/1748326243174_d66c0f6f/zhutu.png?x-oss-process=image/resize,w_300"
						alt=""></image> -->
					<image :src="competitionImage"></image>
				</view>
			</view>
			<!-- 前沿科学 -->
			<view class="forefront">
				<view class="header_line">
					<view class="line"></view>
					前沿科学
				</view>
				<view class="forefront_content">
					<view class="forefront_items" v-for="(item, index) in forefrontList" :key="index"
						@click="courseClick(item.id)">
						<image :src="item.titleImageUrl" alt=""></image>
						<view class="title">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<!-- 信息汇总学习课程 -->
			<view class="course">
				<view class="header_line">
					<view class="line"></view>
					科普知识
				</view>
				<view class="course_items" v-for="(item, index) in courseList" :key="index"
					@click="courseClick(item.id)">
					<image :src="item.titleImageUrl" alt=""></image>
					<view class="titles">
						<view class="recommend" v-if="item.recommend == 1">
							推荐
						</view>
						<text class="describe">
							{{ item.title }}
						</text>
					</view>
					<view class="bottom">
						<view class="bottom_left">
							<image
								src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776375504_2ca00d91/eye.png?x-oss-process=image/resize,w_300"
								alt=""></image>
							<text>
								{{ item.hits }}
							</text>
						</view>
						<view class="bottom_right">
							立即学习
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 等级测试 -->
		<u-popup :show="practiceShow" mode="center" :round="10">
			<view class="practice_pop">
				<view class="clsoe">
					<image
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776289685_6c0d3527/close.png?x-oss-process=image/resize,w_300"
						alt="" @click="practiceShow = false"></image>
				</view>
				<view class="title">
					等级测试
				</view>
				<view class="grade">
					{{ practiceData.levelId }}
				</view>
				<view class="des">
					当前等级为
					{{ practiceData.name }}，加油，加油，加油
				</view>
				<view class="des">
					达到{{ practiceData.upgradeNum }}分，即可升级
				</view>
				<view class="button" @click="upgrade">
					开始测试
				</view>
			</view>
		</u-popup>
		<!-- 快速报名 -->
		<u-popup :show="activeShow" mode="center" :round="30">
			<view class="active_pop">
				<view class="clsoe">
					<u-icon name="close-circle" color="#fff" size="50" @click="activeShow = false"></u-icon>
					<!-- <image
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776289685_6c0d3527/close.png?x-oss-process=image/resize,w_300"
						alt="" @click="activeShow = false"></image> -->
				</view>
				<view class="back">
					<image
						:src="competitionPopupImage"
						alt=""></image>
				</view>
				<view class="button" @click="signUp">
					我要报名
				</view>
			</view>
		</u-popup>
		<!-- 每日一练 -->
		<u-popup :show="everyShow" mode="center" :round="30">
			<view class="practice_pop">
				<view class="clsoe">
					<image
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776289685_6c0d3527/close.png?x-oss-process=image/resize,w_300"
						alt="" @click="everyShow = false"></image>
				</view>
				<view class="title">
					每日一练
				</view>
				<view class="image">
					<image :src="item ? item : ''" v-for="(item, index) in avatarImageList" :key="index" alt="">
					</image>
				</view>
				<view class="des">
					已有{{ totalFinish }}次练习啦，快来一起练习吧
				</view>
				<view class="button" @click="practice">
					开始练习
				</view>
			</view>
		</u-popup>

		<Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar/tabbar.vue"
	import {
		listPopularize,
		getPracticeNum,
		getInfo,
		checkTestLevel,
		hasQuestion,
		getImageConfig
	} from '@/api/index.js'
	import config from '@/config/config.js'
	import {
		systemInfo
	} from '../../../utils/mixin'
	export default {
		components: {
			Tabbar
		},
		mixins: [systemInfo],
		data() {
			return {
				tabbarIndex: 0,
				// 当前地址
				address: '',
				// 搜索
				inputModel: '',
				// 导航
				navList: [{
						label: '自然科学',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778367925_5b01044a/zirankexue.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '天文知识',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778244440_dbcb2946/tianwenzhishi.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '航天科技',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776689188_f1c04ba5/hangtiankeji.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '信息通信',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778367925_f211776c/xinxitongxin.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '人工智能',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776878090_bd30ee45/rengongzhineng.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '生物工程',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778244446_0f07514c/shengwugongcheng.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '神奇化学',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778244446_bbd8a93c/shenqihuaxue.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '物理探秘',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778367924_fe30559e/wulitanmi.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '生命健康',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778244441_4db542e6/shengmingjiankang.png?x-oss-process=image/resize,w_300',
						link: ''
					},
					{
						label: '活动报名',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776715497_6344832f/huodongbaoming.png?x-oss-process=image/resize,w_300',
						link: ''
					},
				],
				// 每日联系导航
				practiceNavList: [{
						label: '下载',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753778367925_781fc01b/xiazai.png?x-oss-process=image/resize,w_300',
						link: '',
						vipStatus: 1
					},
					{
						label: '历史',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776340972_d4b595a7/cuoti.png?x-oss-process=image/resize,w_300',
						link: '',
						vipStatus: 0
					},
					{
						label: '解答',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776741574_61517187/jieda.png?x-oss-process=image/resize,w_300',
						link: '',
						vipStatus: 1
					},
					{
						label: '练习',
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776786025_42f19d4e/lianxi.png?x-oss-process=image/resize,w_300',
						link: '',
						vipStatus: 0
					},
				],
				// 前沿科学
				forefrontList: [],
				// 学习课程
				courseList: [],
				// 每日练习-等级测试
				practiceShow: false,
				// 活动报名
				activeShow: false,
				// 每日一练
				everyShow: false,
				// 总题数
				questionNum: 0,
				// 答对数量
				correctNum: 0,
				// 升级数量
				upgradeNum: 0,
				// 总练习数量
				totalFinish: 0,
				// 每日一练头像
				avatarImageList: [],
				// 等级测试
				practiceData: {},
				// vip
				vipStatus: 0,

				triggered: false,
				downRefresh: false,


				competitionImage: '',
				competitionPopupImage: ''
			};
		},
		onLoad() {
			// 状态栏高度
			this.getSystemInfo();

			// #ifdef APP-PLUS || H5
			uni.hideTabBar();
			// #endif

			// #ifdef MP-WEIXIN
			this.updata()
			// #endif

		},
		onShow() {
			// 等级测试/每日一练返回
			uni.$on('goon', (userId) => {
				this.address = uni.getStorageSync('deptName') ? uni.getStorageSync('deptName').substr(0, 3) : '';
				// 前沿科学
				this.getPopularize()
				// 科普知识
				this.getcourseList()
				// 测试等级
				this.getDetail()
			});
			this.address = uni.getStorageSync('deptName') ? uni.getStorageSync('deptName').substr(0, 3) : '';
			// 前沿科学
			this.getPopularize()
			// 科普知识
			this.getcourseList()
			// 测试等级
			this.getDetail()
			// 获取竞赛入口图片
			getImageConfig().then(res => {
				this.competitionImage = config.pic_prefixs + res.data.competitionImage
				this.competitionPopupImage = config.pic_prefixs + res.data.competitionPopupImage
			})
		},
		methods: {
			// 小程序更新
			updata() {
				const updateManager = uni.getUpdateManager()
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onCheckForUpdate(res => {
							try {
								console.log('res.hasUpdate', res)
								uni.showModal({
									content: '检测到新版本，是否立即更新？',
									showCancel: true,
									confirmText: '更新',
									showCancel: false,
									success: res0 => {
										if (res0.confirm) {
											updateManager.onUpdateReady(res1 => {
												console.log('下载完成1', res1)
												uni.showModal({
													content: '新版本已下载完成，即将重启应用...',
													showCancel: false,
													confirmText: '确定',
													success: () => {
														updateManager
															.applyUpdate()
													},
													fail: error => {
														console.error(
															'更新失败:',
															error)
														uni.showToast({
															title: '更新失败，请稍候重试',
															icon: 'none',
															duration: 2000
														})
													}
												})
											})

											updateManager.onUpdateFailed(res1 => {
												console.log('失败1', res1)
												uni.showModal({
													content: '新版本下载失败，请检查网络连接或稍后重试',
													showCancel: false,
													confirmText: '知道了'
												})
											})
										}
									},
									fail: error => {
										console.error('弹窗失败:', error)
									}
								})
							} catch (error) {
								console.error('onCheckForUpdate failed:', error)
							}
						})

					}
				});
			},
			onRefresh() {
				this.triggered = true;
				this.downRefresh = true

				this.address = uni.getStorageSync('deptName') ? uni.getStorageSync('deptName').substr(0, 3) : '';
				// 前沿科学
				this.getPopularize()
				// 科普知识
				this.getcourseList()
				// 测试等级
				this.getDetail()

				setTimeout(() => {
					this.triggered = false;
					this.downRefresh = false
				}, 500);
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},

			// 测试等级
			async getDetail() {
				const res = await getInfo()
				this.vipStatus = res.data.user.vipStatus
				if (res.data.user.levelId == 0) {
					this.practiceShow = true
					const resp = await checkTestLevel()
					this.practiceData = resp.data
				} else {
					// 练习数量
					this.getgetPracticeNum();
				}
			},


			// 获取所有每日练模块数量
			async getgetPracticeNum() {
				if (uni.getStorageSync('token')) {
					const res = await getPracticeNum()
					this.questionNum = res.data.questionNum
					this.correctNum = res.data.correctNum
					this.upgradeNum = Math.floor(this.correctNum / res.data.questionNum * 100)
					this.totalFinish = res.data.totalFinish
					this.avatarImageList = []
					if (res.data.avatarImageList) {
						res.data.avatarImageList.forEach(item => {
							this.avatarImageList.push(config.pic_prefix + item)
						})
					}
					if (!res.data.todayFinish && res.data.questionNum !== 0) {
						this.everyShow = true
					}
				}
			},
			// 切换学校
			addressClick() {
				// 登录拦截
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/subpackage1/login/account"
					})
				} else {
					uni.navigateTo({
						url: "/subpackage1/campus/campus"
					})
				}
			},
			updateTabbar(e) {
				this.tabbarIndex = e
			},
			// nav点击事件
			navClick(item) {
				if (item.label == '活动报名') {
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: "/subpackage1/login/account"
						})
					} else {
						// this.activeShow = true
						uni.navigateTo({
							url: "/subpackage1/signUp/signUpList"
						})
					}
				} else {
					uni.navigateTo({
						url: "/subpackage1/classification/classificationList?title=" + item.label
					})
				}
			},
			// 科普知识
			courseClick(id) {
				uni.navigateTo({
					url: "/subpackage1/classification/classificationDetails?id=" + id
				})
			},
			// 竞赛列表
			competitionClick() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/subpackage1/login/account"
					})
				} else {

					// uni.navigateTo({
					// 	url: "/subpackage2/competition/competitionList"
					// })
					this.activeShow = true
				}
			},
			// 升级
			upgrade() {
				uni.navigateTo({
					url: "/subpackage2/upgrade/upgrade"
				})
				this.practiceShow = false
			},
			// 每日练习
			async practiceClick(item) {
				// 登录拦截
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/subpackage1/login/account"
					})
				} else {
					if (item.label == '练习') {
						const res = await getInfo()
						if (res.data.user.levelId == 0) {
							this.practiceShow = true
						} else {
							if (this.questionNum == 0) {
								uni.$u.toast('暂无练习题！');
							} else {
								this.everyShow = true
							}
						}
					} else if (item.label == '历史') {
						uni.navigateTo({
							url: "/subpackage2/wrongQuestion/wrongQuestion"
						})
					} else if (item.label == '解答') {
						if (this.vipStatus) {
							uni.navigateTo({
								url: "/subpackage2/answer/answer"
							})
						} else {
							uni.showToast({
								title: '请先开通会员',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url: "/subpackage3/member/member"
								})
							},500)
						}
					} else if (item.label == '下载') {
						if (this.vipStatus) {
							uni.navigateTo({
								url: "/subpackage2/download/download"
							})
						} else {
							uni.showToast({
								title: '请先开通会员',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url: "/subpackage3/member/member"
								})
							},500)
						}
					}
				}
			},
			// 我要报名
			signUp() {
				uni.navigateTo({
					url: "/subpackage2/competition/competitionList"
				})
			},
			// 开始练习
			async practice() {
				this.everyShow = false
				const res = await hasQuestion()
				if (res.code == 200) {
					uni.navigateTo({
						url: "/subpackage2/practice/practice"
					})
				} else {
					// uni.$u.toast(res.msg)
				}
			},


			// 获取前沿科学
			async getPopularize() {
				const res = await listPopularize({
					pageNum: 1,
					pageSize: 5,
					isAdvanced: 1
				})
				res.rows.forEach(element => {
					element.titleImageUrl = config.pic_prefix + element.titleImage
				});
				this.forefrontList = res.rows
			},
			// 获取科普知识
			async getcourseList() {
				const res = await listPopularize({
					pageNum: 1,
					pageSize: 10,
					isAdvanced: 0
				})
				res.rows.forEach(element => {
					element.titleImageUrl = config.pic_prefix + element.titleImage
				});
				this.courseList = res.rows
			},
		}
	};
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 132rpx;
		background-color: rgb(245, 245, 245);
		height: 100vh;

		// #ifdef APP-PLUS || H5
		height: 100vh !important;
		padding-bottom: 0;
		// #endif




		.box_scroll {
			height: 100%;

			// #ifdef APP-PLUS || H5
			flex: 1;
			height: calc(100vh - 100rpx);
			// #endif
		}

		.header {
			width: 100vw;
			height: 460rpx;
			position: relative;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 2;

			.address {
				font-size: 30rpx;
				position: absolute;
				color: #fff;
				font-weight: 500;
				margin-left: 40rpx;
				top: 100rpx;
				display: flex;
				align-items: center;

				.els {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				image {
					width: 25rpx;
					height: 25rpx;
					margin-left: 15rpx;
				}
			}

			.input {
				width: 300rpx;
				height: 50rpx;
				position: absolute;
				top: 100rpx;
				left: 185rpx;

			}

			/deep/.u-input {
				width: 300rpx !important;
				height: 50rpx !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
				box-sizing: border-box !important;
				background-color: rgb(135, 189, 217) !important;
				border: none !important;
			}

			/deep/.placeholder-class {
				color: #000 !important;
				font-size: 22rpx !important;
			}

			.back {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			height: 450rpx;
			width: calc(100vw - 70rpx);
			margin: auto;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			background-color: #fff;
			position: relative;
			top: -50rpx;
			padding-top: 80rpx;
			z-index: 1;
			border-radius: 15px;

			.nav-items {
				width: 20%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: center;

				.nav-img {
					width: 88rpx;
					height: 88rpx;
				}

				.nav-label {
					font-size: 26rpx;
					color: #000;
					margin-top: 10rpx;
				}
			}
		}

		.practice {
			width: calc(100vw - 70rpx);
			background-color: #fff;
			height: 500rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 35rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			border-radius: 15px;

			.practice_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.title {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 500;

					image {
						height: 32rpx;
						width: 28rpx;
						margin-right: 15rpx;
					}
				}

				.nums {
					color: rgb(139, 134, 134);
					font-size: 24rpx;
				}
			}

			.practice_progress {
				width: 100%;
				color: rgb(179, 173, 173);
				font-size: 20rpx;
				margin-top: 30rpx;

				/deep/ .u-line-progress {
					margin-top: 15rpx !important;
				}
			}

			.practice_nav {
				width: 100%;
				margin: 20rpx 0;
				height: 130rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.practice_item {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					width: 50rpx;

					.nav-img {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.practice_image {
				width: 100%;

				image {
					width: 100%;
					height: 140rpx;
					border-radius: 5px;
				}
			}
		}

		.forefront {
			width: calc(100vw - 70rpx);
			height: 400rpx;
			margin: auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 35rpx;
			margin-top: 35rpx;
			border-radius: 15px;

			.header_line {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				text-align: left;
				display: flex;
				align-items: center;

				.line {
					width: 6rpx;
					height: 30rpx;
					background-color: rgb(64, 149, 229);
					margin-right: 15rpx;
				}
			}

			.forefront_content {
				display: flex;
				align-items: center;
				margin-top: 65rpx;
				overflow-x: auto;

				.forefront_items {
					width: 250rpx;
					font-size: 24rpx;
					margin-right: 20rpx;

					.title {
						width: 250rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					image {
						width: 250rpx;
						height: 150rpx;
						margin-bottom: 10rpx;
						border-radius: 10rpx;
					}

					video {
						width: 250rpx;
						height: 150rpx;
						margin-bottom: 10rpx;
						border-radius: 10rpx;
					}
				}

				video::-webkit-media-controls-play-button {
					display: none;
					/* 隐藏播放按钮 */
				}

			}
		}

		.course {
			width: calc(100vw - 70rpx);
			margin: auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 35rpx;
			margin-top: 35rpx;
			border-radius: 15px;

			.header_line {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				text-align: left;
				display: flex;
				align-items: center;

				.line {
					width: 6rpx;
					height: 30rpx;
					background-color: rgb(64, 149, 229);
					margin-right: 15rpx;
				}
			}

			.course_items {
				margin-top: 40rpx;
				width: 100%;

				image {
					width: 100%;
					height: 161px;
					border-top-left-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
				}

				video {
					width: 100%;
					// height: 180rpx;
					border-radius: 20rpx;
				}

				.titles {
					width: 100%;
					text-align: left;
					display: flex;
					align-items: center;

					.recommend {
						display: inline-block;
						width: 60rpx;
						height: 30rpx;
						background-color: rgb(249, 0, 0);
						color: #fff;
						font-size: 16rpx;
						text-align: center;
						line-height: 30rpx;
						letter-spacing: 2rpx;
						border-top-right-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						margin-top: 20rpx;
						margin-right: 10rpx;
					}

					.describe {
						font-size: 26rpx;
						line-height: 30rpx;
						letter-spacing: 2rpx;
						margin-top: 20rpx;
					}

				}
			}

			.bottom {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				justify-content: space-between;

				.bottom_left {
					display: flex;
					align-items: center;
					color: rgb(179, 173, 173);
					font-size: 20rpx;

					image {
						width: 18rpx;
						height: 14rpx;
						margin-right: 5rpx;
					}
				}

				.bottom_right {
					width: 135rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					background-color: rgb(64, 149, 229);
					border-radius: 6rpx;
					font-size: 20rpx;
					letter-spacing: 3rpx;
				}
			}
		}

		.practice_pop {
			width: 670rpx;
			height: 670rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.clsoe {
				width: 100%;
				height: 75rpx;
				text-align: right;

				image {
					width: 48rpx;
					height: 48rpx;
					opacity: 0.5;
				}
			}

			.title {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-weight: 500;
				letter-spacing: 3rpx;
			}

			.image {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 100rpx 0;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}

			.grade {
				font-size: 200rpx;
				font-weight: 800;
				text-align: center;
				width: 100%;
				color: rgb(254, 0, 0);
			}

			.des {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 3rpx;
				line-height: 2;
				color: rgb(179, 173, 173);
			}

			.button {
				margin: 30rpx auto;
				width: 280rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				border-radius: 10rpx;
				color: #fff;
				font-size: 28rpx;
				background-color: rgb(64, 149, 229);
				letter-spacing: 3rpx;
			}
		}

		.active_pop {
			position: relative;
			width: 670rpx;
			height: 670rpx;
			box-sizing: border-box;

			.back {
				position: absolute;
				width: 670rpx;
				height: 740rpx;
				top: 0;
				left: 0;

				image {
					width: 670rpx;
					height: 740rpx;
				}
			}

			.clsoe {
				position: absolute;
				z-index: 2;
				right: 20rpx;
				top: 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.button {
				position: absolute;
				z-index: 2;
				bottom: 80rpx;
				left: 195rpx;
				width: 280rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				border-radius: 10rpx;
				color: #fff;
				font-size: 28rpx;
				background-color: rgb(64, 149, 229);
				letter-spacing: 3rpx;
			}
		}
	}
</style>